import { ref, watch } from "vue"
import { BlockProps } from "./block"
import { useCssClassAdd, useCssStyle } from "@ui/utils/css"
export const useBlock = (props: BlockProps) => {
  const _ref = ref<HTMLButtonElement>(), _class = ref<any>({ 'z-block': true }), _style = ref<any>({})
    , judgeObjClassName = {}
  watch(() => props.wrap, (v) => {
    _class.value['z-flex--wrap'] = v
  })
  watch(() => ({ basis: props.basis, auto: props.auto }), ({ basis, auto }) => {
    _style.value.flexBasis = useCssStyle(basis || '0')
    _style.value.flexGrow = basis ? 0 : auto
    _style.value.overflow = 'hidden'
  }, { immediate: true })
  watch(() => props.left, (v) => {
    _style.value.marginLeft = useCssStyle(v)
  }, { immediate: true })
  watch(() => props.right, (v) => {
    _style.value.marginRight = useCssStyle(v)
  }, { immediate: true })
  watch(() => props.order, (v) => {
    _style.value.order = v || undefined
  }, { immediate: true })
  useCssClassAdd(props, 'justify', _class.value, judgeObjClassName)
  useCssClassAdd(props, 'align', _class.value, judgeObjClassName)
  useCssClassAdd(props, 'self', _class.value, judgeObjClassName)
  return {
    _ref,
    _class,
    _style
  }
}